<template>
	<view class="container">
		<view class="change-tips">绑定手机号后四位：{{ mobileString }}</view>
		<view class="change-block">
			<input class="change-block-input" v-model="verify" placeholder-class="change-block-input-placeholder" placeholder="请输入验证码" />
			<view class="change-block-btn" @tap.stop="sendSmsHandle">{{ sendingText }}</view>
		</view>
		<view class="change-block" style="margin-top:1rpx;"><input v-model="password" password="true" placeholder-class="change-block-input-placeholder" class="change-block-input" placeholder="请输入新密码" /></view>
		<view class="change-block" style="margin-top:1rpx;"><input v-model="repassword" password="true" placeholder-class="change-block-input-placeholder" class="change-block-input" placeholder="确认新密码" /></view>
		<view class="change-btn" @tap.stop="savePasswordHandle">修改密码</view>
		<u-verification-code :keep-running="true" unique-key="password" :seconds="60" ref="uCode" @change="changeCode"></u-verification-code>
	</view>
</template>

<script>
import md5 from 'js-md5';
import Encryption from '@/utils/Encryption.js';
import { AES_KEY } from '@/constant/Config.js';
import { mapState } from 'vuex';
import Tools from '@/utils/Tools.js'
export default {
	data() {
		return {
			sendingText: '',
			mobile: '',
			verify: '',
			password: '',
			repassword: ''
		};
	},
	computed: {
		mobileString: function() {
			const mobile = String(this.userInfo.mobile);
			return mobile.substr(mobile.length - 4);
		}
	},
	methods: {
		sendSmsHandle() {
			if (this.$refs.uCode.canGetCode) {
				this.$refs.uCode.start();
				this.$u.api.sendSmsCode(this.userInfo.mobile, 'passwd').then(res => {});
			}
		},
		changeCode(text) {
			this.sendingText = text;
		},
		savePasswordHandle() {
			this.$u.api.saveAccountPassword(this.userInfo.mobile, this.verify, Encryption.aesToPassword(this.password), Encryption.aesToPassword(this.repassword)).then(res => {
				Tools.showSuccess('修改成功', () => {
					this.navigateBack();
				});
			});
		}
		
	}
};
</script>

<style lang="scss">
.change-tips {
	margin-top: 20rpx;
	padding: 0 32rpx;
	height: 50rpx;
	line-height: 50rpx;
	color: #666;
}

.change-block {
	height: 96rpx;
	padding: 0 32rpx;
	background-color: #fff;
	display: flex;
	align-items: center;

	.change-block-input {
		height: 80rpx;
		flex: 1;
		font-size: 34rpx;
	}

	.change-block-input-placeholder {
		color: rgba(204, 204, 204, 1);
	}

	.change-block-btn {
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 40rpx;
	}
}

.change-btn {
	width: 686rpx;
	height: 90rpx;
	background: $theme-main-color;
	border-radius: 4rpx;
	margin: 56rpx auto 0;
	font-size: 34rpx;
	font-weight: 400;
	color: rgba(255, 255, 255, 1);
	line-height: 90rpx;
	text-align: center;
}
</style>
